<template>
  <div class="mui-content">
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号/手机号/邮箱" v-model="account">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码" v-model="password">
				</div>
			</form>
			<form class="mui-input-group">
				<ul class="mui-table-view mui-table-view-chevron">
          <li class="mui-table-view-cell">
						验证码
            <input id='verifval' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码" v-model="verifval">
            <input id="verifNum" type="text" :value="verifCode.verifCode" readonly  @click="refresh">
            <img id="verif" :src="verifUrl+verifCode.verifImage" alt="图片无法加载啦^_^">
					</li>
					<li class="mui-table-view-cell">
						自动登录
						<div :class="['mui-switch',{'mui-active':flag}]" @click="flag=!flag">
              <div class="mui-switch-handle"></div>
            </div>
					</li>
				</ul>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary" @click="login">登录</button>
				<div class="link-area"><router-link id='reg' to="/user/register">注册账号</router-link> <span class="spliter">|</span>
         <router-link id='forgetPassword' to="/user/retrieve">忘记密码</router-link>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
</template>

<script>
import {Toast} from 'mint-ui'
import mui from '../../lib/mui/js/mui.min.js'
export default {
  data(){
    return {
      account:"",
      password:"",
      flag:true,
      verifCode:{
        verifCode: "c29f",
        verifImage: "verifCodeImages/verif5.jpeg"
      },
      verifUrl:'http://localhost:3000/images/',
      verifval:""
    }
  },
  methods:{
    getVerifCode(){
      this.$ajax({
        url:'users/verifyCode',
        method:'get'
      }).then(resp=>{
        this.verifCode = resp.data.message;
      })
    },
    refresh(){
      this.getVerifCode();
    },
    login(){
      if(this.account.trim()==""){
        Toast("账号不能为空");
        return;
      }
      if(this.password.trim()==""){
        Toast("密码不能为空");
        return;
      }
      if(this.verifval.trim()==""){
        Toast("验证码不能为空");
        return;
      }
      let userInfo = {
        user:this.account,
        password:this.password,
        login:this.flag?1:0
      }
      if(this.verifCode.verifCode===this.verifval){
        this.$ajax({
          url:"users/userlogin",
          method:"post",
          data:userInfo
        }).then(resp=>{
          let result = resp.data;
          if(result.status === 0){
            Toast(result.message);
          }else{
            Toast("上线成功");
            if(this.flag){
              // 储存到本地
              localStorage.setItem("userInfo",JSON.stringify(result.message));
            }
            // 保存登陆者id
            localStorage.setItem("uid",JSON.stringify(result.message[0].u_id));
            // 放入
            this.$store.commit("initUserInfo",result.message);
            this.$router.push({path:"/user/userInfo",query:{userInfo:result.message,uid:result.message[0].u_id}});
          }
        })
      }else{
        Toast('验证码不正确！');
      }
      this.getVerifCode();
    }
  },
  mounted(){
    mui('.mui-switch')['switch']();
  },
  created(){
    this.getVerifCode();
  }
}
</script>

<style scoped>
@font-face {
  font-family: cwf;
  src: url('../../lib/mystyle/font/王汉宗中行书繁.ttf');
}
#verifNum{
  font-family: cwf;
  font-size: 1.8em;
  letter-spacing: 6px;
  width: 100px;
  height: 30px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  z-index: 1;
}
#verif{
  color: red;
  width: 100px;
  height: 30px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  z-index: 0;
}
#verifval{
  margin-left: 18%;
  width: 50%;
}
</style>